<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<title></title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../static/assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../static/assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../static/assets/vendor/linearicons/style.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../static/assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../static/assets/css/demo.css">
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../static/assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../static/assets/img/favicon.png">
<!--	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">-->
	<link href="../css/fileinput.css"  th:href="@{/static/assets/vendor/bootstrap-fileinput/css/fileinput.css}" media="all" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
	<link href="../themes/explorer-fas/theme.css" th:href="@{/static/assets/vendor/bootstrap-fileinput/themes/explorer-fas/theme.css}" media="all" rel="stylesheet" type="text/css"/>
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<div th:replace="/bar::navbar"></div>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div th:replace="/bar::sidebar(activeUri='elements')"></div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<div class="panel">
						<div class="panel-heading">
							<h3 class="panel-title">上传你的照片组</h3>
						</div>
						<div class="panel-body">
							<form action="/uploadFile" id="userForm" method="post" enctype="multipart/form-data" target="iframe">
								<textarea class="form-control" id="content" name="content" placeholder="描述一下你的经历" rows="4"></textarea>
								<br>
								<div id="file-loading" class="file-loading">
									<input id="input-fa" name="input-fa" type="file"  multiple/>
								</div>
							</form>
<!--							&lt;!&ndash;防止跳转刷新&ndash;&gt;-->
<!--							<iframe name="iframe" style="display:none;"></iframe>-->
						</div>
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
			<div class="container-fluid">
				<p class="copyright">Copyright &copy; 2017.Company name All rights reserved.</p>
			</div>
		</footer>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
	<script src="../static/assets/vendor/jquery/jquery.min.js"></script>
	<script src="../static/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="../static/assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="../static/assets/scripts/klorofil-common.js"></script>

	<!--	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>-->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
	<script src="../js/plugins/piexif.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/js/plugins/purify.js}" type="text/javascript"></script>
	<script src="../js/plugins/sortable.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/js/plugins/sortable.js}" type="text/javascript"></script>
	<script src="../js/fileinput.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/js/fileinput.js}" type="text/javascript"></script>
	<script src="../js/locales/fr.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/js/locales/fr.js}" type="text/javascript"></script>
	<script src="../js/locales/es.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/js/locales/es.js}" type="text/javascript"></script>
	<script src="../themes/fas/theme.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/themes/fas/theme.js}" type="text/javascript"></script>
	<script src="../themes/explorer-fas/theme.js" th:src="@{/static/assets/vendor/bootstrap-fileinput/themes/explorer-fas/theme.js}" type="text/javascript"></script>

	<script th:inline="javascript" type="text/javascript">

		// 文件上传
		$("#input-fa").fileinput({
			language: 'zh',
			theme: 'fa',
			showUpload: true,
			showCaption: true,
			showPreview: true, //显示小图
			showRemove: false,
			overwriteInitial: true,
			fileType: "any",
			previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
			initialPreviewAsData: true,
			// uploadUrl: "http://localhost:8080/uploadFile", //, //上传地址 location.pathname
			multiple: true,
			uploadAsync: false, //同时上传
			initialPreviewCount: 100,
			allowedFileExtensions : ['jpg', 'png','bmp','jpeg',"gif"], //文件类型
			layoutTemplates :{
				// actionDelete:'', //去除上传预览的缩略图中的删除图标
				actionUpload:'',//去除上传预览缩略图中的上传图片；
				actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
			}
		});
		//执行完成后回调函数
		$("#file-3").on('filebatchuploadsuccess', function(event, data, previewId, index) {
			alert($("file-3").value());
		});

		function submit(){
			var subject = $("#subject").val()
			var content = $("#content").val()

			$.post(submitUrl+"/submitFile",{"subject":subject,"content":content,"urls":urls.toString()},function(data) {
				console.log(data)
			});


		$(document).ready(function () {


		});


		$("#btn_add_fish").click(function () {
			var picturename="";//获取上传的文件的后缀名，如果不是jpg,或者png的话不出发上传，弹出提示，表单里面的其他内容也不上传。
			picturename=$("#fish_file").val().substring($("#fish_file").val().indexOf('.'),$("#fish_file").val().length).toUpperCase();
			/*当上传的文件的格式是.png .jpg .PNG .JPG时 先将表单内的除图片以外的东西提交到后天，然后在触发插件，将图片上传，保存。
             */
			if (picturename ==".JPG"  || picturename ==".PNG" || picturename =="" || picturename==".BMP"|| picturename==".JPEG") {
				$.ajax({
					type: 'post',
					url: '/SongshanManagement/animalcontent/addfishcontent.html',
					data: $("#form_addfishContent").serialize(),
					success: function (data) {
						fishId = data;
						//不上传图片时，不触发bootstrap 上传插件的初始化方法。仅将表单里面的（除图片以外的）内容提交，
						if ($("#fish_file").val() != "") {
							$('#fish_file').fileinput('upload'); //触发插件开始上传。
						}
						else {
							closeModal('fishAddDetail');
							$("#bootstraptable_fishcontent").bootstrapTable("refresh");
						}
					}
				});
			}else {
				alert("只能上传.jpg，.png，.PNG,.JPG,bmp,jpeg格式的图片");
				return false;
			}

		});
		}
	</script>
</body>

</html>
